<script setup lang="ts">
import DoctorAPI from "@/api/system/doctor";
import { type CommentList, type Doctor } from "@/types/consult";

const item = ref<Doctor>({
  _id: "string",
  isDeleted: 0,
  name: "string",
  department: "string",
  professionalTitle: "string",
  level: "string",
  hospital: "string",
  specialties: "string",
  star: "string",
  num: "string",
  price: "string",
  online: true,
  commentId: "string",
});
const commentList = ref<CommentList>([]);
const isCollapse = ref<boolean>(false);
const handleChange = ({ value }: { value: number }) => {
  console.log(value);
};
const details = () => {
  uni.navigateTo({
    url: `/pages/AskDoctor/components/evaluate?id=${item.value._id}&commentId=${item.value.commentId}`,
  });
};

const back = () => {
  uni.navigateBack();
};

onLoad(async (option) => {
  if (option) {
    const res = await DoctorAPI.getDoctorInfo(option.id);
    if (res !== undefined) {
      item.value = res;
      const result = await DoctorAPI.getComment(res.commentId);
      if (result !== undefined && result.length > 0) {
        commentList.value = commentList.value.concat(result);
      }
    }
  }
});

const toDoctor = () => {
  uni.navigateTo({
    url: `/pages/Describe/index?id=${item.value._id}`,
  });
};
</script>

<template>
  <div class="" style="background-color: #fff">
    <view
      class="pt-60rpx h-200rpx box-border"
      style="
        position: sticky;
        top: 0;
        z-index: 99;
        background-image: linear-gradient(#d3eeeb, #d3f0ec, #d6f1ed, #d8f1ee, #e2f5f2, #e8f6f4);
      "
    >
      <wd-navbar left-arrow @click-left="back">
        <template #right>
          <img src="../../../static/doctor/13.png" alt="" />
        </template>
      </wd-navbar>
    </view>
    <view
      style="
        box-sizing: border-box;
        height: 400rpx;
        padding: 40rpx;
        background-image: linear-gradient(#f1f9f9);
      "
    >
      <view
        style="
          box-sizing: border-box;
          width: 99%;
          padding: 20rpx;
          background-color: #fff;
          border-radius: 30rpx;
          box-shadow: 10px 10px 10px #f2f7f6;
        "
      >
        <view style="display: flex; justify-content: space-between">
          <wd-img
            :width="50"
            :height="50"
            round
            src="../../../static/doctor/15.jpg"
            style="margin-top: -40rpx"
          />

          <view
            class="items-center justify-center flex tracking-0rpx leading-34rpx text-22rpx font-regular text-[#2CB5A5] h-54rpx w-132rpx border-[2px] border-solid border-[#2CB5A5] rounded-[27px]"
          >
            + 关注
          </view>
        </view>
        <view>
          <text class="text-left tracking-0rpx leading-64rpx text-42rpx font-medium text-[#121826]">
            {{ item.name[0] + "医生" }}
          </text>
          <text
            class="text-left tracking-0rpx leading-40rpx text-26rpx font-regular text-[#6F6F6F] ml-10rpx"
          >
            {{ item.department + " | " + item.professionalTitle }}
          </text>
        </view>
        <view class="items-center mt-30rpx flex">
          <span
            class="font-regular h-28rpx w-36rpx rounded-4rpx text-center leading-28rpx text-18rpx text-[#fff] bg-[#677fff] w-52rpx pl-8rpx pr-8rpx pt-2rpx pb-2rpx"
          >
            {{ item.level }}
          </span>
          <text
            class="text-left tracking-0rpx leading-40rpx text-26rpx font-regular ml-8rpx text-[#121826]"
          >
            {{ item.hospital }}
          </text>
        </view>
        <view class="items-center flex mt-26rpx">
          <img
            class="v-middle h-28.62rpx w-30.02rpx"
            src="/src/static/images/评分_2@1x.png"
            alt=""
          />
          <span class="text-left tracking-0rpx leading-36rpx text-36rpx font-medium text-[#02BD8D]">
            {{ item.star }}
          </span>
          <text
            class="text-left tracking-0rpx leading-36rpx text-26rpx font-light ml-8rpx text-[#D9DBDE]"
          >
            /
          </text>
          <text
            class="tracking-0rpx text-left leading-36rpx text-24rpx font-regular ml-8rpx text-[#979797]"
          >
            接诊数
          </text>
          <text
            class="text-left tracking-0rpx leading-36rpx text-38rpx font-medium text-[#02BD8D] ml-8rpx"
          >
            {{ Number(item.num) * 10000 }}
          </text>
        </view>
      </view>
    </view>
    <view style="box-sizing: border-box; padding: 20rpx">
      <view>个人简介</view>
      <view style="margin-top: 30rpx; font-size: 25rpx">擅长领域</view>
      <wd-collapse
        v-model="isCollapse"
        viewmore
        :line-num="2"
        custom-class="box
          text-25rpx
          lh-loose"
      >
        医生寄语 医者仁心；用自己最真挚的爱心呵护每位儿童，专注儿童16年，让孩子不生病！ 专业擅长
        发热、咳嗽、流涕、急性支气管炎、支气管肺炎、哮喘、慢性咳嗽、小儿腹泻、腹痛、便秘、消化不良、小儿胃炎、川崎病、过敏性鼻炎、牛奶蛋白过敏、传染性单核细胞增多症、流行性腮腺炎、疱疹性咽峡炎、手足口病、新生儿黄疸。
        个人简介
        副主任医师，从事小儿内科近20年，四川省妇幼保健协会小儿呼吸专委会常委，西部妇幼医学研究发展中心理事，华西附二院肾儿联盟理事，华西附二院联盟认证医生，双流区质控中心专家组成员，双流区危重症专家组成员，双流区名医库成员，在重庆医科大学附属儿童医院进修学习；曾参与全国小儿机械通气学习班培训、全国危重症识别与规范化抢救培训、西南片区变态反应性疾病培训等。对儿科领域常见病、多发病及疑难、危重病的诊治具有丰富的临床经验。尤其擅长呼吸、消化、变态反应性疾病及危急重症抢救与治疗。在省市级刊物发表多篇文章！
        社会任职
        四川省妇幼保健协会小儿呼吸专委会常委、华西附二院儿肾联盟理事、华西附二院联盟认证医生、双流区名医库成员、双流区儿科质控专家组成员、双流区危重症专家组成员。
        表彰荣誉 多次荣获先进医务工作者、优秀共产党员称号 教育进修
        在重庆医科大学附属儿童医院进修学习；曾参与全国小儿机械通气学习班培训、全国危重症识别与规范化抢救培训、西南片区变态反应性疾病培训等。
        工作经历 先后在重庆医科大学附属儿童医院、自贡市第四人民医院、遂宁市中心医院儿科工作学习！
      </wd-collapse>
    </view>
    <view
      style="
        display: flex;
        align-items: center;
        justify-content: space-around;
        width: 95%;
        height: 120rpx;
        margin: auto;
        background-image: linear-gradient(to right, #1badc6, #19b8b4, #16c1a4);
        border-radius: 40rpx;
      "
    >
      <view>
        <img class="w-60rpx" src="/src/static/doctor/16.png" alt="" />
      </view>
      <view style="color: #fff">
        <view>
          <text>图文问诊</text>
          <text>￥{{ item.price }}/次</text>
        </view>
        <view style="font-size: 25rpx; color: #a7e0e7">最长24小时图文多次沟通</view>
      </view>
      <view>
        <wd-button size="small" style="color: #33c9ae; background-color: #fff">去咨询</wd-button>
      </view>
    </view>
    <view
      style="
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 95%;
        margin: auto;
        margin-top: 40rpx;
      "
    >
      <view>
        患者评价
        <text style="color: #787878">({{ commentList.length }})</text>
      </view>
      <view>
        评分
        <text style="color: #18c3a4">{{ commentList[0].star }}</text>
      </view>
    </view>
    <view>
      <view
        style="
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 95%;
          margin: auto;
          margin-top: 40rpx;
        "
      >
        <view>{{ commentList[0].name }}</view>
        <view><wd-rate v-model="commentList[0].star" @change="handleChange" /></view>
      </view>
      <view style="width: 95%; margin: auto; margin-top: 35rpx; font-size: 27rpx">
        <view>{{ commentList[0].content }}</view>
      </view>
      <view style="margin-left: 2.5%; font-size: 20rpx; color: #ccccce">
        {{ commentList[0].time }}
      </view>
    </view>
    <view style="display: flex; align-items: center; justify-content: center; margin-top: 40rpx">
      <wd-button style="color: #28c6aa; background-color: #eaf8f6" @click="details">
        更多{{ commentList.length - 1 }}个评论
      </wd-button>
    </view>
    <view style="margin-top: 30rpx; margin-left: 2.5%">他的文章</view>
    <view
      style="
        display: flex;
        justify-content: space-around;
        width: 95%;
        margin: auto;
        margin-top: 30rpx;
      "
    >
      <view>
        <view style="font-size: 30rpx">
          夏天不能光脚丫、不能吃冰激凌？
          <br />
          别用养生折腾孩子了
        </view>
        <view>
          <img
            style="width: 40rpx; height: 40rpx; vertical-align: middle; border-radius: 50%"
            src="/src/static/doctor/15.jpg"
            alt=""
          />
          <text style="margin-left: 20rpx; font-size: 25rpx; color: #cccccd">
            王医生 积水潭医院
          </text>
        </view>
        <view style="margin: 20rpx 0; color: #19c3a4">
          <em>#</em>
          儿童健康
        </view>
        <view style="font-size: 25rpx; color: #ceced0">收藏 10 | 评论 10</view>
      </view>
      <view>
        <img style="width: 250rpx" src="/src//static/doctor/15.jpg" alt="" />
      </view>
    </view>
    <view
      style="
        display: flex;
        justify-content: space-around;
        width: 95%;
        margin: auto;
        margin-top: 30rpx;
      "
    >
      <view>
        <view style="font-size: 30rpx">
          夏天不能光脚丫、不能吃冰激凌？
          <br />
          别用养生折腾孩子了
        </view>
        <view>
          <img
            style="width: 40rpx; height: 40rpx; vertical-align: middle; border-radius: 50%"
            src="/src/static/doctor/15.jpg"
            alt=""
          />
          <text style="margin-left: 20rpx; font-size: 25rpx; color: #cccccd">
            王医生 积水潭医院
          </text>
        </view>
        <view style="margin: 20rpx 0; color: #19c3a4">
          <em>#</em>
          儿童健康
        </view>
        <view style="font-size: 25rpx; color: #ceced0">收藏 10 | 评论 10</view>
      </view>
      <view>
        <img style="width: 250rpx" src="/src//static/doctor/15.jpg" alt="" />
      </view>
    </view>
    <view
      style="box-sizing: border-box; height: 200rpx; padding-top: 70rpx; background-color: #fafafa"
    >
      <wd-divider>没有更多了</wd-divider>
    </view>
    <view style="height: 200rpx">
      <view
        style="
          position: fixed;
          bottom: 0;
          display: flex;
          align-items: center;
          justify-content: space-around;
          width: 100%;
          background-color: #fff;
        "
      >
        <img style="width: 100rpx" src="/src/static/doctor/17.png" alt="" />
        <view style="width: 70%">
          <wd-button block style="color: #fff; background-color: #16c2a3" @click="toDoctor">
            咨询医生
          </wd-button>
        </view>
      </view>
    </view>
  </div>
</template>

<style lang="scss" scoped>
:deep() {
  .wd-navbar {
    background-color: transparent;
  }
}

.active {
  overflow: visible;
}
</style>
